<template>
<div>
    <h1>在线编辑</h1>
    <hot-table ref="testHot" :settings="hotSettings"></hot-table>
</div>
</template>

<script>
// import { defineComponent } from 'vue';
import {HotTable} from '@handsontable/vue3';
// import { DropdownMenu } from 'handsontable/plugins/dropdownMenu';
import {registerAllModules} from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.css';

// register Handsontable's modules
registerAllModules();
const riseWeightVal = function (value, callback) {
    if (/^\d+(?=\.{0,1}\d+$|$)/.test(value) || value === '' || value == undefined || value == null) {
        callback(true)
    } else {
        alert('请输入数字')
        callback(false)
    }
}
export default {
    name: "EditExcelOnline",
    components: {
        HotTable
    },
    data() {
        return {
            hotSettings: {
                data: [
                    [860009, '中集860009', '中集-温湿度智能监控宝', '860009', '9', '-3', '启用', '可使用', '温度传感器', '测试9'],
                ],
                // startRows: 11, //行列范围
                // startCols: 11,
                minRows: 1, // 最小行列
                // minCols: 6,
                width: '100%',
                // maxRows: 30, //最大行列
                // maxCols: 30,
                rowHeaders: true, // 行表头
                height: 320,
                rowHeights: 23,
                // colHeaders: true, // 行表头
                colHeaders: ["设备编号", "设备名称", "设备厂家", "物联网卡卡号", "高温阈值", '低温阈值', '设备状态', '操作状态', '设备类型', '备注'], //自定义列表头or 布尔值
                // minSpareCols: 2, //列留白
                // minSpareRows: 2, //行留白
                currentRowClassName: 'currentRow', // 为选中行添加类名，可以更改样式
                currentColClassName: 'currentCol', // 为选中列添加类名
                autoWrapRow: true, // 自动换行
                contextMenu: {
                    // 自定义右键菜单，可汉化，默认布尔值
                    items: {
                        row_above: {
                            name: '上方插入一行'
                        },
                        row_below: {
                            name: '下方插入一行'
                        },
                        'copy': {
                            name: '复制'
                        },
                        // col_left: {
                        //   name: "左方插入列"
                        // },
                        // col_right: {
                        //   name: "右方插入列"
                        // },
                        hsep1: '---------', // 提供分隔线
                        remove_row: {
                            name: '删除行'
                        },
                        'clear_custom': {
                            name: '删除所有单元格',
                            callback: function () {
                                this.clear()
                            }
                        }
                        // remove_col: {
                        //   name: "删除列"
                        // },
                        // make_read_only: {
                        //   name: "只读"
                        // },
                        // borders: {
                        //   name: "表格线"
                        // },
                        // commentsAddEdit: {
                        //   name: "添加备注"
                        // },
                        // commentsRemove: {
                        //   name: "取消备注"
                        // },
                        // freeze_column: {
                        //   name: "固定列"
                        // },
                        // unfreeze_column: {
                        //   name: "取消列固定"
                        // },
                        // hsep2: "---------"
                    }
                }, // 右键效果
                fillHandle: true, // 选中拖拽复制 possible values: true, false, "horizontal", "vertical"
                fixedColumnsLeft: 0, // 固定左边列数
                fixedRowsTop: 0, // 固定上边列数
                columns: [
                    // 添加每一列的数据类型和一些配置
                    //data: dataList数组中对应的 键，readOnly: 只读， type: 属于什么类型 例：text, numeric, validator: 数据验证
                    {data: 'serialNumber', readOnly: false, validator: riseWeightVal, allowInvalid: false},
                    {},
                    {
                        data: 'manufacturer',
                        readOnly: false,
                        type: "dropdown",
                        selectEditor: true,
                        allowInvalid: false,
                        source: ['中集-温湿度智能监控宝', '洲斯-智能温湿度记录仪'],
                        filterCondition: (filter, rowValue) => {
                            if (filter.value.length === 0) {
                                return true;
                            }
                            return filter.value.includes(rowValue);
                        }
                    }, // 下拉选择的选项
                    {},
                    {},
                    {},
                    {},
                    {},
                    {
                        editor: 'dropdown',
                        validator: (value, callback) => {
                            const allowedValues = ['温湿度传感器'];
                            if (allowedValues.includes(value)) {
                                callback(true);
                            } else {
                                callback(false);
                            }
                        },
                        allowInvalid: false,
                        source: ['温湿度传感器'] // 下拉选择的选项
                    },
                    {},
                ],
                manualColumnFreeze: true, // 手动固定列
                manualColumnMove: true, // 手动移动列
                manualRowMove: true, // 手动移动行
                manualColumnResize: true, // 手工更改列距
                manualRowResize: true, // 手动更改行距
                comments: true, // 添加注释
                customBorders: [], // 添加边框
                columnSorting: true, // 排序
                stretchH: 'none' // 根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展
            }
        };
    },
    mounted() {
        // 获取任务详情
        console.log(this.taskid)
        if (this.taskid) {
            this.$store.dispatch('GET_Field_LIST', this.taskid).then(data => {
                // 拼column
                var columnSize = data.data.columnLargestSize
                if (columnSize === 0) {
                    columnSize = 30
                }
                var size = []
                for (var i = 0; i < columnSize; i++) {
                    var col = {}
                    size.push(col)
                }
                console.log(size)
                // this.hotSettings.columns = size;
                // 放数据
                this.hotSettings.data = data.data.result
            })
        }
    },
    methods: {
        goBack() {
            this.$parent.goback()
            // this.$router.push('/integration/task')
        },
        submit() {
            this.postData()
        },
        transformTf(str) {
            return str.replace(/([A-Z])/g, '_$1').toLowerCase()
        },
        transformStr3(str) {
            const re = /_(\w)/g
            return str.replace(re, function ($0, $1) {
                return $1.toUpperCase()
            })
        },
        saveData() {
            var examData = this.$refs.testHot.table.getData() // 这里要注意，如果使用this.hotSettings.data 保存表格数据，拖拽完以后数据的顺序将不会更新，因此使用 this.$refs.testHot.table.getData(); 来获取数据，获取的数据格式为二维数组。
            var param = []
            param.push(examData)
            param.push(this.taskid)
            this.$store.dispatch('SAVE_Field_LIST', param).then(data => {
                this.$notify({
                    title: '操作成功',
                    dangerouslyUseHTMLString: true,
                    type: 'success'
                })
                console.log(data)
                this.goBack()
            })
        }
    }
}
</script>

<style scoped>
/*@import 'handsontable/dist/handsontable.full.css';*/
</style>
